<template>
  <div class="tab-bar">
    <div v-for="(item, index) in items" :key="index" :class="currentPage === item.path ? 'active' : ''"
      @click="goToPage(item.path)">
      <p>

        <i :class="'iconfont ' + item.icon"></i>
        <span>{{ item.text }}</span>
      </p>
    </div>
  </div>
</template>

<script lang="ts" setup>
import router from "@/router";
import { onMounted } from "vue";
import { onUpdated } from "vue";
import { defineComponent, ref } from "vue";
import { useRoute } from "vue-router";




const currentPage = ref('/home/index');

const items = [
  { icon: "icon-shouye", text: "首页", path: "/home/index" },
  { icon: "icon-dsaf", text: "运动圈", path: "/home/sports" },
  { icon: "icon-jiahao", text: "去运动", path: "/home/toexercise" },
  { icon: "icon-a-DistributionChannels", text: "赛事", path: "/home/match" },
  { icon: "icon-wode", text: "我的", path: "/home/my" },
];

const goToPage = (path: string) => {
  currentPage.value = path;
  router.push(path)
};
onMounted(() => {
  currentPage.value = useRoute().path
  console.log(currentPage.value);
  
})




</script>

<style scoped>
.tab-bar {
  background-color: #ffffff;
  position: fixed;
  bottom: 0;
  padding: 10px;
  width: 100%;
  display: flex;
  justify-content: center;
  text-align: center;
  font-size: 16px;
  z-index: 9999999999999999;
 
}

.tab-bar div {
  position: relative;
  left: 10%;
  transform: translateX(-50%);
  width: 100%;
}


.tab-bar div p * {
  display: block;
}

.tab-bar div p img {
  width: 10px;
  height: 10px;
  margin: auto;
}

.active {
  color: palegreen;

}

@font-face {
  font-family: "iconfont";
  /* Project id 4387092 */
  src: url('//at.alicdn.com/t/c/font_4387092_zmd0amt6rp.woff2?t=1714014831278') format('woff2'),
    url('//at.alicdn.com/t/c/font_4387092_zmd0amt6rp.woff?t=1714014831278') format('woff'),
    url('//at.alicdn.com/t/c/font_4387092_zmd0amt6rp.ttf?t=1714014831278') format('truetype');
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 22px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-shouye:before {
  content: "\e62a";
  font-size: 22px;
}

.icon-jiahao:before {
  content: "\e604";
  font-size: 16px;
}

.icon-wode:before {
  content: "\e8a0";
  font-size: 16px;
}

.icon-a-DistributionChannels:before {
  content: "\e893";
  font-size: 16px;
}

.icon-dsaf:before {
  content: "\e600";
  font-size: 16px;
}
</style>